<div class="crayons-article__video">
  <% minutes, seconds = article.video_duration_in_minutes.split(":") %>
  <div id="video-player-source" data-meta="<%= article.decorate.video_metadata.to_json %>" data-message=""></div>
  <script src="//content.jwplatform.com/libraries/b1zWy2iv.js" async></script>
  <div id="video-player-<%= article.id %>" class="crayons-article__video__player" style="background-image: url('<%= article.cloudinary_video_url %>');">
    <img alt="Play Button" id="play-butt" src="<%= image_path("playbutt.png") %>" />
    <img alt="Pause Button" id="pause-butt" src="<%= image_path("pausebutt.png") %>" />
  </div>
  <% unless internal_navigation? || user_signed_in? %>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "VideoObject",
        "url": "<%= article.video_source_url %>",
        "uploadDate": "<%= article.published_at&.rfc3339 %>",
        "name": "<%= article.title %>",
        "description": "<%= article.description %>",
        "thumbnailUrl": "<%= article.cloudinary_video_url %>",
        "contentUrl": "<%= article.video_source_url %>",
        "duration": "<%= format("PT%<minutes>sM%<seconds>sS", minutes: minutes, seconds: seconds) %>"
      }
    </script>
  <% end %>
</div>
